<template>
  <main>
    <manage-table
      :tableName="tableName"
      :tableHeader="tableHeader"
      :dataList="linkList"
      :currentPage="currentPage"
      :pageSize="pageSize"
      @allow="allow"
      @remove="remove"
    ></manage-table>
    <div class="table-page">
      <Page 
        :total="totalLink" 
        :current="currentPage" 
        :page-size="pageSize"
        @on-change="changePage" 
        show-elevator 
      />
    </div>
    <Modal v-model="modal" :title="confirmMsg.title" @on-ok="confirm">
      <p>
        {{confirmMsg.pre}}
        <span style="color: #ff9900">{{confirmMsg.name}}</span>
        {{confirmMsg.suf}}
      </p>
    </Modal>
  </main>
</template>

<script>
import {
  findLinkList,
  updateLink,
  deleteLink
} from 'service'

export default {
  name: 'LinkManage',
  data() {
    return {
      modal: false,
      tableName: 'link-manage',
      tableHeader: [
        {title: ' ', slot: 'number'},
        {title: '名称', key: 'name'},
        {title: '描述', key: 'description'},
        {title: '链接', key: 'url'},
        {title: '头像', slot: 'picture'},
        {title: '创建日期', slot: 'time'},
        {title: '操作', slot: 'link-action'}
      ],
      linkList: [],
      linkId: 0,
      totalLink: 0,
      currentPage: 1,
      pageSize: 7,
      confirmMsg: {
        title: '删除友链',
        pre: '您正在准备删除友链 ' ,
        name: '',
        suf: ' 确定吗？'
      },
    }
  },
  created() {
    this.getLinkList()
  },
  methods: {
    async getLinkList() {
      let res = await findLinkList()
      console.log(res)
      this.linkList = res.data.data
      this.totalLink = res.data.data.length
      // 伪分页
      this.linkList = this.linkList.slice(
        (this.currentPage-1) * this.pageSize, 
        this.pageSize * this.currentPage
      )
    },
    async changePage(currentPage) {
      this.currentPage = currentPage
      await this.getLinkList()
    },
    async confirm() {
      let res = await deleteLink(this.linkId)
      console.log(res)
      if (res.data.flag) {
        this.$Message.success({content: '删除友链成功!'})
        this.currentPage = 1
        await this.getLinkList()
      } else {
        this.$Message.error({content: res.data.errorMsg})
      }
    },
    remove(row) {
      this.linkId = row.id
      this.confirmMsg.name = row.name
      this.modal = true
    },
    allow(row) {
      var link = JSON.parse(JSON.stringify(row))
      delete link._index
      delete link._rowKey
      this.$Modal.confirm({
        title: '确认',
        content: '是否添加 <span style="color: #ff9900">' + link.name + '</span> 到友链？',
        onOk: () => {
          this.update(link)
        }
      })
    },
    async update(link) {
      link.allow = true
      let res = await updateLink(link)
      if (res.data.flag) {
        this.$Message.success('添加友链成功！')
        await this.getLinkList()
      } else {
        this.$Message.error({content: res.data.errorMsg})
      }
    }
  },
  components: {
    "manage-table": () => import('./unit/ManageTable')
  }
}
</script>

<style lang="scss" scoped>
main {
  max-width: 1000px; 
  .table-page {
    margin-bottom: 2rem;
    text-align: center;
  }
}
</style>